<template>
    <div>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>试卷管理</el-breadcrumb-item>
        <el-breadcrumb-item>题库管理</el-breadcrumb-item>
      </el-breadcrumb>
      <br><br>
      <el-form :inline="true" :model="queryForm" class="demo-form-inline">
        <el-form-item label="题目">
          <el-input v-model="queryForm.quContent" placeholder="题目"></el-input>
        </el-form-item>
        <el-form-item label="题型">
          <el-select v-model="queryForm.quType" placeholder="题型">
            <el-option label="单选题" value="单选题"></el-option>
            <el-option label="多选题" value="多选题"></el-option>
            <el-option label="判断题" value="判断题"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadData">查询</el-button>
          <el-button type="primary" @click="add">新增</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="list" style="width: 100%">
        <el-table-column prop="quId" label="编号" width="50"></el-table-column>
        <el-table-column prop="quContent" label="题干" width="300"></el-table-column>
        <el-table-column prop="quType" label="题型" width="180"></el-table-column>
        <el-table-column prop="quScore" label="分数" width="180"></el-table-column>
        <el-table-column prop="quAnswer" label="答案" width="180"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
        <el-table-column label="操作">
          <!--slot-scope：定义插槽，用来获取循环列表的迭代变量-->
          <!--迭代变量：scope.row-->
          <!--迭代变量索引：scope.$index-->
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--分页插件-->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryForm.page"
          :page-sizes="[5, 10, 15]"
          :page-size="queryForm.row"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
      <!--新增对话框-->
      <!--visible.sync 是否显示对话框 -->
      <el-dialog
        title="题库新增"
        :visible.sync="dialogVisible"
        width="50%">

        <el-form ref="form" :model="paperForm" label-width="80px">
          <el-form-item label="题目">
            <!-- el-input  文本框-->
            <el-input v-model="paperForm.quContent"></el-input>
          </el-form-item>

          <el-form-item label="题型">
            <el-select v-model="paperForm.quType" placeholder="请选择题型">
              <el-option label="单选题" value="单选题"></el-option>
              <el-option label="多选题" value="多选题"></el-option>
              <el-option label="判断题" value="判断题"></el-option>
            </el-select>
          </el-form-item>


          <el-form-item label="答案">

            <template v-if="paperForm.quType=='判断题'">
              <el-radio-group v-model="paperForm.quAnswer">
                <el-radio label="√"></el-radio>
                <el-radio label="×"></el-radio>
              </el-radio-group>

            </template>
            <template v-else-if="paperForm.quType=='单选题'">
              <el-radio-group v-model="paperForm.quAnswer">
                <el-radio label="A"></el-radio>
                <el-radio label="B"></el-radio>
                <el-radio label="C"></el-radio>
                <el-radio label="D"></el-radio>
              </el-radio-group>
            </template>

            <template v-else>
              <el-checkbox-group v-model="moreAnswer">
                <el-checkbox label="A" name="type"></el-checkbox>
                <el-checkbox label="B" name="type"></el-checkbox>
                <el-checkbox label="C" name="type"></el-checkbox>
                <el-checkbox label="D" name="type"></el-checkbox>
              </el-checkbox-group>
            </template>
          </el-form-item>

          <el-form-item label="A:">
            <el-input type="textarea" v-model="paperForm.quAoption"></el-input>
          </el-form-item>
          <el-form-item label="B:">
            <el-input type="textarea" v-model="paperForm.quBoption"></el-input>
          </el-form-item>
          <el-form-item label="C:">
            <el-input type="textarea" v-model="paperForm.quCoption"></el-input>
          </el-form-item>
          <el-form-item label="D:">
            <el-input type="textarea" v-model="paperForm.quDoption"></el-input>
          </el-form-item>

          <el-form-item label="分数">
            <el-input v-model="paperForm.quScore"></el-input>
          </el-form-item>

        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">保存</el-button>
         </span>
      </el-dialog>
    </div>

</template>

<script>
    export default {
        name: "PaperQuestion",
        data(){
          return{
             list:[],
             dialogVisible:false,//控制对话框是否显示
             queryForm:{//查询表单
                  quType:"",
                  quContent:"",
                  page:1,
                  row:5
             },
            paperForm:{
                quContent:"",
                quType:"",
                quAnswer:"",
                quScore:"",
                quAoption:"",
                quBoption:"",
                quCoption:"",
                quDoption:"",
            },//试卷表单对象
            moreAnswer:[],//多选框答案
            total:0,//总条数
            totalPage:0//总页数

          }
        },
        methods:{
            loadData(){//加载试题列表
                var self = this;
                //发送ajax请求
                this.$http.post("/paper-question/paper/query",this.$qs.stringify(this.queryForm)).then(function (rs) {
                     if(rs.data.code==200){
                        self.list = rs.data.data.list;
                        self.total = rs.data.data.total;
                        self.totalPage = rs.data.data.totalPage;
                     }else{
                       //清空
                       self.list=[];
                     }
                })
            },
          handleEdit(i,row){//编辑，跳转页面
              console.log(row);
              //跳转到修改页面，并把选中行的数据传过去
              this.$router.push({"name":"PaperQuestionEdit",query:row})
          },
          add(){//新增，打开对话框
              //清空表单数据
              this.paperForm={};

              this.dialogVisible = true;
          },
          save(){//保存
            //判断是否是多选题提交
            if(this.paperForm.quType=="多选题"){
              //清空
              this.paperForm.quAnswer="";
              //把数组转成字符串
              for(var i=0;i<this.moreAnswer.length;i++){
                this.paperForm.quAnswer+=this.moreAnswer[i]
              }
            }
            var self = this;
            console.log(this.paperForm);
            //ajax提交
            this.$http.post("/paper-question/paper/add",this.$qs.stringify(this.paperForm))
              .then(function (rs) {
                self.$message(rs.data.msg);
                if(rs.data.code==200){
                  //关闭弹窗
                  self.dialogVisible = false;
                  //刷新
                  self.loadData();

                }else{
                  self.$message(rs.data.msg);
                }
              })


          },
          handleSizeChange(row){ //下来框触发的事件
              //更改当前查询的每页显示条数
              this.queryForm.row = row;
              //刷新
              this.loadData();
          },
          handleCurrentChange(v){ //页码触发的事件
              //更改当期查询的页码
             this.queryForm.page=v;
            //刷新
             this.loadData();
          }



        },
        created() {
            this.loadData();
        }

    }
</script>

<style scoped>

</style>
